<template>
  <div>
    <el-breadcrumb separator="/" class="header">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>物资管理</el-breadcrumb-item>
      <el-breadcrumb-item>出库记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <!-- //搜索表单 -->
      <el-form :inline="true" :model="queryMap" class="demo-form-inline">
        <el-form-item label="发放单号">
          <el-input v-model="queryMap.outNum" placeholder="发放单号"></el-input>
        </el-form-item>
        <el-form-item label="发放类型">
          <el-select v-model="queryMap.type" placeholder="发放类型">
            <el-option label="全部类型" value=""></el-option>
            <el-option label="政府领取" value="0"></el-option>
            <el-option label="医院领取" value="1"></el-option>
            <el-option label="小区领取" value="2"></el-option>
            <el-option label="个人领取" value="3"></el-option>
            <el-option label="其他领取" value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select v-model="queryMap.status" placeholder="请选择状态">
            <el-option label="已发放" :value="0"></el-option>
            <el-option label="回收站" :value="1"></el-option>
            <el-option label="待审核" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <router-link to="/out-stocks">
            <el-button type="success"> 发放 </el-button>
          </router-link>
        </el-form-item>
      </el-form>
      <!-- //物资表单列表 -->
      <el-table :data="products" border style="width: 100%">
        <el-table-column fixed prop="id" label="#" width="50">
        </el-table-column>
        <el-table-column prop="outNum" label="发放单号" width="180" show-overflow-tooltip>
        </el-table-column>
        <el-table-column  label="发放类型" width="100">
          <template slot-scope="scope">
            <button v-if="scope.row.type==0" type="success">政府领取</button>
            <button v-if="scope.row.type==1" type="danger">医院领取</button>
            <button v-if="scope.row.type==2" type="warning">小区领取</button>
            <button v-if="scope.row.type==3" type="info">个人领取</button>
            <button v-if="scope.row.type==4">其他领取</button>
          </template>
        </el-table-column>
        <el-table-column label="紧急程度" width="180" prop="priority">
          <template slot-scope="scope">
            <el-rate
              v-model="scope.row.priority"
              disabled
              show-text
              :texts="['不急', '常规', '紧急', '特急', '超急']"
              
            >
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="发放地点" width="150">
        </el-table-column>
        <el-table-column prop="productNumber" label="总数" width="80">
        </el-table-column>
        <el-table-column prop="phone" label="联系方式" width="120">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <button v-if="scope.row.status==1"  type="danger">回放</button>
            <button v-if="scope.row.status==0">已放</button>
            <button v-if="scope.row.status==2" type="warning">审核</button>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作员" width="145">
        </el-table-column>
        <el-table-column prop="outNum" label="发放时间" width="200" show-overflow-tooltip>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row.id)" type="text" size="small">
              <i class="el-icon-view"></i>
              明细
            </el-button>
            <el-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不用了"
              icon="el-icon-info"
              icon-color="red"
              title="这是一段内容确定删除吗？"
              @confirm="rm(scope.row.id)"
            >
              <el-button
                type="text"
                slot="reference"
                size="mini"
                style="margin-left: 20px"
                 @confirm="back(scope.row.id)"
              >
                <i class="el-icon-s-operation"></i>
                回收站</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryMap.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="this.queryMap.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>

export default {
  data() {
    return {
      show: false,
      //表单
      queryMap:{pageSize:10,pageNum:1,status:0},
      total: "0", //共几条
      value1: [],
      value2: [],
      tableData: [],
      products: [],
      total: "",
      status:"1",
      type:'',
      outNum:''
    };
  },
  created() {
    this.gettadaList();
  },
  methods: {
    handleSizeChange(newSize) {
     this.queryMap.pageSize = newSize;
     this.gettadaList();
    },
    handleCurrentChange( current) {
      this.queryMap.pageNum = current;
      this.gettadaList();
    },
    //获取表格数据
    gettadaList() {
      this.$http
        .get("outStock/findOutStockList" ,{params:this.queryMap}
        )
        .then((res) => {
          this.total = res.data.data.total;
          this.products = res.data.data.rows;
          console.log(res);
        });
    },
    //从回收站恢复
    async back(id) {
      let res = await this.$http.put("/outStock/back/" + id);
      if (res.data.msg == "Success") {
        this.$message.success("从回收站恢复成功");
        this.gettadaList();
      }
      // console.log("ddawdawdaw=============>", res);
    },
    //删除
   async rm(id) {
      // console.log("1111111111111111111111111111111111",id);
      let res = await this.$http.put("/outStock/remove/" + id);
      if (res.data.msg == "Success") {
        this.$message.success("移入回收站成功");
        this.gettadaList();
      }
      // console.log("ddawdawdaw=============>", res);
    },
    //搜索
    search() {
      this.queryMap.pageNum = 1;
      this.gettadaList();
    },
    //重置
   reset() {
      this.queryMap = { pageNum: 1, pageSize: 10, status: 0 };
    },
    //明细
     async handleClick(id) {
      let res = await this.$http.get("outStock/detail/" + id);
      console.log("dwadwadaw", res);
      if (res.data.msg == "成功") {
        this.$message.success("获取该数据明细成功");
        this.dialogVisible = true;
        this.consumer = res.data.data.consumerVO;
        this.detailTable = res.data.data.itemVOS;
      }
    },
  },
};
</script>

<style scooed lang="less">
.header {
  font-size: 13px;
  height: 22px;
  line-height: 22px;
  margin-left: 10px;
}
</style>